<template>
	<view class="main">
		<tn-nav-bar></tn-nav-bar>
		<view class="tn-padding">

			<view style="margin-top: 50px;" class="tn-text-xl tn-text-bold tn-margin-bottom">{{ paperData.title }}
			</view>
			<view class="tn-margin-top line-height-16">
				<!-- <view>姓名：{{ paperData.userId_dictText }}</view> -->
				<view>
					考试结果：
					<span v-if="paperData.userScore >= paperData.qualifyScore"
						style="color:#00ff00;font-size: 34rpx;">合格</span>
					<span v-else style="color: #ff0000;font-size: 34rpx;">不合格</span>
				</view>
				<view>
					试卷总分：{{ paperData.totalScore }}分
				</view>
				<view>
					及格分数：{{ paperData.qualifyScore }}分
				</view>
				<view>
					考试用时：{{ paperData.userTime }}分钟
				</view>
				<view>
					考试得分：{{ paperData.userScore }}
				</view>

				<!-- <view>考试时间：{{ paperData.createTime }}</view> -->
			</view>
			<view>
				<view v-for="item in paperData.quList" :key="item.id" class="qu-content">
					<p class="tn-margin-top">{{ item.sort + 1 }}.{{ item.content }}（得分：{{ item.actualScore }}）</p>
					<p v-if="item.image!=null && item.image!=''">
						<el-image :src="item.image" style="max-width:100%;" />
					</p>
					<view v-if="item.quType === 1 || item.quType===3" class="tn-margin-left">
						<tn-radio-group v-model="radioValues[item.id]">
							<view class="tn-flex tn-flex-direction-column">
								<tn-radio v-for="an in item.answerList" :label="an.id" :name="an.id">
									{{ an.abc }}.{{ an.content }}
									<view v-if="an.image!=null && an.image!=''" style="clear: both">
										<image style="width: 100%;" v-if="an.image" :src="an.image"></image>
									</view>
								</tn-radio>
							</view>
						</tn-radio-group>

						<view>

							<view style="color: #24da70">
								正确答案：{{ radioRights[item.id] }}
							</view>

							<view v-if="!item.answered" style="color: #ff0000;">
								答题结果：未答
							</view>

							<view v-if="item.answered && !item.isRight" style="color: #ff0000;">
								答题结果：{{ myRadio[item.id] }}
							</view>

							<view v-if="item.answered && item.isRight" style="color: #24da70;">
								答题结果：{{ myRadio[item.id] }}
							</view>

						</view>

					</view>

					<view v-if="item.quType === 4">

						<view :gutter="24">

							<view>
								我的回答：{{ item.answer }}
							</view>

						</view>

					</view>

					<view v-if="item.quType === 2">
						<tn-checkbox-group v-model="multiValues[item.id]">
							<tn-checkbox v-for="an in item.answerList" :key="an.id" :label="an.id"
								:name="an.id">{{ an.abc }}.{{ an.content }}
								<view v-if="an.image!=null && an.image!=''" style="clear: both">
									<image style="width: 100%;" v-if="an.image" :src="an.image"></image>
								</view>
							</tn-checkbox>
						</tn-checkbox-group>

						<view :gutter="24">

							<view style="color: #24da70">
								正确答案：{{ multiRights[item.id].join(',') }}
							</view>

							<view v-if="!item.answered" style="color: #ff0000;">
								答题结果：未答
							</view>

							<view v-if="item.answered && !item.isRight" style="color: #ff0000;">
								答题结果：{{ myMulti[item.id].join(',') }}
							</view>

							<view v-if="item.answered && item.isRight" style="color: #24da70;">
								答题结果：{{ myMulti[item.id].join(',') }}
							</view>

						</view>
					</view>

				</view>

			</view>
		</view>
		<tn-modal v-model="modalShow" :title="title" :content="paperData.userScore"></tn-modal>
	</view>
</template>

<script>
	import {
		paperResult
	} from '../../../api/exam.js'
	export default {
		data() {
			return {
				modalShow: true,
				title: '本场考试得分',
				
				paperId: '',
				paperData: {
					quList: []
				},
				radioValues: {},
				multiValues: {},
				radioRights: {},
				multiRights: {},
				myRadio: {},
				myMulti: {}
			};
		},
		onLoad(data) {
			this.getList(data.id)
		},
		methods: {
			getList(id) {
				// const params = {
				// 	id: '1896442533014196225'
				// }
				const params = { id: id }
				paperResult(params).then(response => {
					// 试卷内容
					this.paperData = response.data

					// 填充该题目的答案
					this.paperData.quList.forEach((item) => {
						let radioValue = ''
						let radioRight = ''
						let myRadio = ''
						const multiValue = []
						const multiRight = []
						const myMulti = []

						item.answerList.forEach((an) => {
							// 用户选定的
							if (an.checked) {
								if (item.quType === 1 || item.quType === 3) {
									radioValue = an.id
									myRadio = an.abc
								} else {
									multiValue.push(an.id)
									myMulti.push(an.abc)
								}
							}

							// 正确答案
							if (an.isRight) {
								if (item.quType === 1 || item.quType === 3) {
									radioRight = an.abc
								} else {
									multiRight.push(an.abc)
								}
							}
						})

						this.multiValues[item.id] = multiValue
						this.radioValues[item.id] = radioValue

						this.radioRights[item.id] = radioRight
						this.multiRights[item.id] = multiRight

						this.myRadio[item.id] = myRadio
						this.myMulti[item.id] = myMulti
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.line-height-16 {
			line-height: 1.6em;
		}
	}
	::v-deep .tn-modal__box__content{
		font-size: 40rpx;
		color: red;
	}
</style>